<!--
 * @Author: Dorange.Wang
 * @Date: 2021-03-31 09:11:16
 * @LastEditors: wangming
 * @LastEditTime: 2022-07-19 16:43:31
 * @Description: file content
-->
<route>
{
  "meta":{
    "title":"基础设置",
    "showMenu":true,
    "serialNum": 10
  }
}
</route>
<template>
  <div>
    <el-row class="pt20" v-loading="loading">
      <el-col :span="12" :offset="6">
        <el-form
          :model="formData"
          ref="form"
          label-width="150px"
          label-position="right"
        >
          <el-form-item
            label="应用名称"
            prop="appName"
            :rules="[
              {
                required: true,
                message: '应用名称不能为空',
                trigger: 'change',
              },
            ]"
          >
            <el-input
              style="width: 500px"
              v-model="formData.appName"
              placeholder="请输入应用名称"
              :maxlength="64"
              show-word-limit
            />
          </el-form-item>

          <el-form-item label="应用Logo（缩略）" prop="icon">
            <common-upload
              :base64="useBase64"
              :size="0.5"
              isCloud
              resourceType="P.AppLogo"
              :beforeUpload="beforeUpload"
              @success="(v) => handleUploadSuccess(v, 'icon')"
            >
              <el-button
                v-if="formData.id && !formData.icon || isDeployed && !formData.icon"
                icon="el-icon-upload2"
                >上传Logo</el-button
              >
              <el-image
                v-if="formData.icon"
                style="width: 128px; height: 128px; border-radius: 2px"
                :src="formData.icon.accessUrl || formData.icon"
                fit="cover"
              >
              </el-image>
            </common-upload>
            <div style="font-size: 12px; color: #999">
              支持jpg/png格式图片，大小不能超过500KB，建议图片尺寸为128px*128px
            </div>
          </el-form-item>
          <el-form-item label="应用Logo" prop="icon">
            <common-upload
              :base64="useBase64"
              resourceType="P.AppLogo"
              isCloud
              :size="0.5"
              :beforeUpload="beforeUpload"
              @success="(v) => handleUploadSuccess(v, 'iconPro')"
            >
              <el-button
                v-if="formData.id && !formData.iconPro || isDeployed && !formData.iconPro"
                icon="el-icon-upload2"
                >上传Logo</el-button
              >
              <el-image
                v-if="formData.iconPro"
                style="width: 210px; height: 60px; border-radius: 2px"
                :src="formData.iconPro.accessUrl || formData.iconPro"
                fit="cover"
              >
              </el-image>
            </common-upload>
            <div style="font-size: 12px; color: #999">
              支持jpg/png格式图片，大小不能超过500KB，建议图片尺寸为60px*210px
            </div>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submit">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { putHmtenantappBaseconfigNotvalidatepermission } from "@/apis/dev-centre/HmTenantAppController.js";
import { putHmTenantAppUpdateBasic } from "@/apis/build/HmAppPublishedController.js";
export default {
  name: "BaseSetting",
  data() {
    return {
      loading: false,
      formData: {},
    };
  },

  computed: {
    ...mapGetters(["APP_INFO"]),
    isDeployed(){
      return process.env.VUE_APP_ROOT_URL === './'
    },
    useBase64(){
      return this.isDeployed
    }
  },

  created() {
    this.loading = true;
    this.$watch(
      "APP_INFO",
      (value) => {
        this.formData = { ...value };
        if (value.appName) {
          this.loading = false;
        }
      },
      { immediate: true }
    );
  },

  methods: {
    beforeUpload(file) {
      const type = file.name.split(".").pop().toLowerCase();
      if (["jpg", "png", "jpeg"].includes(type)) {
        return true;
      } else {
        this.$message.error("只能上传jpg/png格式图片");
        return false;
      }
    },

    handleUploadSuccess(data, type = "icon") {
      this.$set(this.formData, type, data);
    },

    async submit() {
      try {
        await this.$refs.form.validate();
        const { id, icon, appName, iconPro } = this.formData;
        const params = {
          id,
          icon,
          appName,
          iconPro,
        };
        if (icon && icon.accessUrl) {
          params.icon = JSON.stringify(params.icon);
        }
        if (iconPro && iconPro.accessUrl) {
          params.iconPro = JSON.stringify(params.iconPro);
        }
        this.loading = true;
        let api = putHmtenantappBaseconfigNotvalidatepermission
        if(this.isDeployed){
          api = putHmTenantAppUpdateBasic
          delete params.id
        }
        api(params)
          .then((res) => {
            this.$store.commit("SET_APP_INFO", {
              ...this.APP_INFO,
              icon,
              appName,
              iconPro,
            });
            this.$message.success("操作成功");
          })
          .finally(() => {
            this.loading = false;
          })
          .finally(() => {
            this.loading = false;
          });
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
